<template>
  <div id="layout-box" ref="layouBox">
    <h1 class="title">楼层管理</h1>
    <div class="main-cont">
      <!-- 工具栏 -->
      <v-toolbar @click="handleToolClick"></v-toolbar>
      <div class="table-cont mt10">
        <!-- 表格 -->
        <el-table :data="layoutList" v-loading="tableLoading" ref="table" :height="height">
          <el-table-column prop="Id" label="布局ID"></el-table-column>
          <el-table-column prop="Title" label="布局名称" width="auto"></el-table-column>
          <!-- <el-table-column label="楼层数" width="auto">
            <template slot-scope="scope"><span>0</span></template>
          </el-table-column> -->
          <el-table-column label="设置" width="auto">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="modifyLayout(scope.row)"
                type="text"
                size="mini">修改</el-button>
              <el-button
                @click.native.prevent="deleteLayout(scope.row)"
                type="text"
                size="mini">删除</el-button>
              <el-button
                @click.native.prevent="setLayout(scope.row)"
                type="text"
                size="mini">配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增/编辑弹窗 -->
    <v-dialog
    :title="editMode === 'ADD' ? '新建楼层布局':'修改楼层布局'"
    :isVisible="editDialogShow"
    @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="layoutForm" :rules="layoutRules" ref="layoutForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="布局名称" prop="Title">
                <el-input v-model="layoutForm.Title" placeholder="请输入布局名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="布局ID" prop="Id">
                <el-input v-model="layoutForm.Id" placeholder="请输入布局ID" :disabled="editMode === 'ADD' ? false:true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="左侧图标">
                <el-select v-model="leftBtnVal" popper-class="zIndex-popper" placeholder="请选择左侧图标">
                  <el-option label="请选择" value="0"></el-option>
                  <el-option v-for="item in topBtns"
                  :key="item.Id"
                  :label="item.Title"
                  :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="右侧图标">
                <el-select v-model="rightBtnVal" popper-class="zIndex-popper" placeholder="请选择右侧图标">
                  <el-option label="请选择" value="0"></el-option>
                  <el-option v-for="item in topBtns"
                  :key="item.Id"
                  :label="item.Title"
                  :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="布局类型" prop="LayoutType">
                <el-select v-model="layoutForm.LayoutType" popper-class="zIndex-popper" placeholder="请选择布局类型">
                  <el-option value="0" label="自定义"></el-option>
                  <el-option v-for="item in templateList"
                  :key="item.FileName"
                  :label="item.Name"
                  :value="item.FileName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Head背景色" prop="HeadBackground">
                <el-input v-model="layoutForm.HeadBackground" placeholder="请输入Head背景色"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="是否显示顶部标题栏" prop="IsShowTopTitle">
                <el-checkbox label="显示顶部标题栏" v-model="isShowTopTitle" name="type"></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm('layoutForm')" size="mini">重置</el-button>
          <el-button @click="closeDialog" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitForm('layoutForm')" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
import {
  VHeader
} from '../../../../components'
import VToolbar from '../../comm/iToolbar/iToolbar'
import VDialog from '../../comm/iDialog/iDialog'
import { nextPage } from '../../../../assets/js'
import { checkColor } from '../../js/rules'
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/ajax'
export default {
  name: 'workSpace',
  components: {
    VHeader,
    VToolbar,
    VDialog
  },
  data () {
    return {
      editMode: 'ADD',
      editDialogShow: false,
      height: null,
      layoutList: [],
      layoutForm: {
        Title: '',
        Id: '',
        LayoutType: '',
        HeadBackground: ''
      },
      layoutData: {}, // 存储正在编辑的数据
      layoutRules: {
        Title: [
          { required: true, message: '布局名称不能为空', trigger: 'blur' }
        ],
        Id: [
          { required: true, message: '布局ID不能为空', trigger: 'blur' }
        ],
        LayoutType: [
          { required: true, message: '请选择布局类型' }
        ],
        HeadBackground: [
          { validator: checkColor, trigger: 'blur' }
        ]
      },
      leftBtnVal: '0',
      rightBtnVal: '0',
      isShowTopTitle: false,
      topBtns: [],
      templateList: [],
      tableLoading: true
    }
  },
  methods: {
    // 工具栏操作
    handleToolClick (oprType) {
      switch (oprType) {
        case 'add':
          this.addLayout()
          break
        default:
          break
      }
    },
    // 获取布局列表
    getLayoutList () {
      ajax.get(api.QUERY_LAYOUT_LIST).then(res => {
        this.layoutList = res
        this.tableLoading = false
      })
    },
    // 获取布局详情
    getLayoutDetails (id) {
      let getData = {
        id: id
      }
      ajax.get(api.QUERY_LAYOUT_DETAILS, getData).then(res => {
        this.editDialogShow = true
      })
    },
    // 新增布局
    addLayout () {
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    // 修改布局
    modifyLayout (data) {
      this.layoutForm = JSON.parse(JSON.stringify(data))
      this.layoutData = JSON.parse(JSON.stringify(data))
      if (this.layoutForm.LeftButtonId) {
        let btnVal = Number(this.layoutForm.LeftButtonId)
        let selectedBtns = []
        if (this.topBtns.length > 0) {
          selectedBtns = this.topBtns.filter(item => {
            return item.Id === btnVal
          })
        }
        if (selectedBtns.length > 0) {
          this.leftBtnVal = btnVal
        } else {
          this.leftBtnVal = '0'
        }
      }
      if (this.layoutForm.RightButtonId) {
        let btnVal = Number(this.layoutForm.RightButtonId)
        let selectedBtns = []
        if (this.topBtns.length > 0) {
          selectedBtns = this.topBtns.filter(item => {
            return item.Id === btnVal
          })
        }
        if (selectedBtns.length > 0) {
          this.rightBtnVal = btnVal
        } else {
          this.rightBtnVal = '0'
        }
      }
      if (this.layoutForm.IsShowTopTitle === '0') {
        this.isShowTopTitle = true
      } else {
        this.isShowTopTitle = false
      }
      this.editMode = 'EDIT'
      this.editDialogShow = true
      this.$nextTick(() => {
        this.$refs.layoutForm.clearValidate()
      })
    },
    // 删除布局
    deleteLayout (data) {
      this.$confirm('确定要删除该布局吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let rmdata = {
          id: data.Id
        }
        ajax.get(api.DELETE_LAYOUT, rmdata).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '布局删除成功'
            })
            this.getLayoutList()
          }
        })
      }).catch(() => {})
    },
    // 配置布局
    setLayout (data) {
      nextPage('/home/floorMgr', {
        id: data.Id
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.initForm('layoutForm')
      this.editDialogShow = false
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.leftBtnVal) {
            this.layoutForm.LeftButtonId = this.leftBtnVal.toString()
          }
          if (this.rightBtnVal) {
            this.layoutForm.RightButtonId = this.rightBtnVal.toString()
          }
          if (this.isShowTopTitle) {
            this.layoutForm.IsShowTopTitle = '0'
          } else {
            this.layoutForm.IsShowTopTitle = '1'
          }
          if (this.editMode === 'ADD') {
            ajax.post(api.ADD_LAYOUT, this.layoutForm).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '布局创建成功'
                })
                this.closeDialog()
                this.getLayoutList()
              }
            })
          } else {
            ajax.post(api.MODIFY_LAYOUT, this.layoutForm).then(res => {
              if (res.Code === 0) {
                this.$message({
                  type: 'success',
                  message: '布局修改成功'
                })
                this.closeDialog()
                this.getLayoutList()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 初始化表单
    initForm (formName) {
      this.$refs[formName].resetFields()
      this.layoutForm = {
        Title: '',
        Id: '',
        LayoutType: '',
        HeadBackground: ''
      }
      this.leftBtnVal = '0'
      this.rightBtnVal = '0'
      this.isShowTopTitle = false
    },
    // 重置表单域
    resetForm (formName) {
      this.initForm('layoutForm')
      if (this.editMode === 'EDIT') {
        this.layoutForm = {...this.layoutData}
        if (this.layoutForm.LeftButtonId) {
          this.leftBtnVal = Number(this.layoutForm.LeftButtonId)
        }
        if (this.layoutForm.RightButtonId) {
          this.rightBtnVal = Number(this.layoutForm.RightButtonId)
        }
        if (this.layoutForm.IsShowTopTitle === '1') {
          this.isShowTopTitle = false
        } else {
          this.isShowTopTitle = true
        }
      }
    }
  },
  created () {
    this.getLayoutList()
    ajax.get(api.QUERY_TOP_BTNS).then(res => {
      if (res.Code === 0) {
        this.topBtns = res.TopBtns
      }
    })
    ajax.get(api.QUERY_TEMPLATE_LIST).then(res => {
      if (res && res.length > 0) {
        this.templateList = res.filter(item => {
          if (item.Name) {
            return item
          }
        })
      }
    })
    this.$nextTick(() => {
      this.height = this.$refs.layouBox.offsetHeight - 138
    })
  }
}
</script>
<style lang="stylus">
#layout-box
  height 100%
  overflow hidden
  .title
    height 60px
    padding 15px
    line-height 30px
    font-size 18px
    font-weight normal
    background #fff
  .mt10
    margin-top 10px
  .main-cont
    padding 10px 0 0 10px
  .form-buttons
    text-align right
  .el-dialog__body
    padding-top 10px
  .dialogForm
    .el-form-item__label
      float none
      display block
      text-align left
    .el-select
      display block
      margin 0
</style>
